<template>
  <div class="restaurant-detail">
    <h1>{{ restaurant.name }}</h1>
    <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image">
    <div class="menu">
      <h2>菜单</h2>
      <table class="menu-table">
        <thead>
          <tr>
            <th>菜品名称</th>
            <th>价格</th>
            <th>图片</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(dish, index) in restaurant.menu" :key="index">
            <td>{{ dish.name }}</td>
            <td>{{ formattedPrice(dish.price) }}</td>
            <td>
              <img :src="dish.image" alt="Dish Image" class="dish-image">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="reviews">
      <h2>用户评价</h2>
      <el-timeline>
        <el-timeline-item v-for="(review, index) in restaurant.reviews" :key="index" :timestamp="review.date">
          <el-card>
            <h4>{{ review.user }}</h4>
            <el-rate v-model="review.rating" disabled></el-rate>
            <p>{{ review.comment }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RestaurantDetail',
  data() {
    return {
      restaurant: {
        name: '幸福小馆',
        image: '/images/6.png',
        menu: [
          { name: '红烧肉', price: 35, image: '/images/红烧肉.png' },
          { name: '清蒸鱼', price: 40, image: '/images/清蒸鱼.png' },
          { name: '酸辣土豆丝', price: 10, image: '/images/土豆丝.png' },
          { name: '凉拌皮蛋', price: 8, image: '/images/皮蛋.png' }
        ],
        reviews: [
          { user: '张三', rating: 5, comment: '非常好吃，服务态度也很好！', date: '2024-11-01' },
          { user: '李四', rating: 4, comment: '环境不错，菜品味道也可以。', date: '2024-11-02' }
        ]
      }
    };
  },
  methods: {
    formattedPrice(price) {
      return `¥${price.toFixed(2)}`;
    }
  },
};
</script>

<style scoped>
.restaurant-detail {
  padding: 20px;
}

.restaurant-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-bottom: 20px;
}

.menu h2 {
  margin-bottom: 20px;
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
}

.menu-table th,
.menu-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.menu-table th {
  background-color: #f2f2f2;
}

.dish-image {
  width: 100px;
  height: auto;
}

.reviews {
  margin-top: 20px;
}
</style>